<template>
	<el-container style="height: 100%;width:100%;padding:0 ;position:fixed; ">
	 <el-header style="width:100%;padding:0;">
	  <Navbar style="height:60px"></Navbar>
	</el-header>
	<el-main style="margin-bottom: 2%;background-image: url('/src/assets/bk.jpg');background-repeat:no-repeat;background-size: cover;" >
		<div style="margin-bottom: 2%; background-image: url('/src/assets/ttt.png'); " ><h1>班级积分排行榜<span style="color: #ffde1e;">⭐</span></h1></div>
		<div style="margin: 0 auto 3% 60%;" >当前班级：<el-select v-model="datas.classid" v-if="datas.level=='100'" name="classid" :readonly="loading"  :clearable="true" placeholder="班级" @change="gettop()">
					<el-option 
					v-for="item in datas.classlist" 
					:key="item.id"
					:label="item.class_name"
					:value="item.id"></el-option>
				</el-select>
				<p v-else>{{datas.classname}}</p>
				</div>
		<div class="points-ranking" style=" border-radius: 2%; box-shadow:0px 0px 12px rgba(0, 0, 0, 0.12); ">
		  <el-table :data="students" :row-class-name="rowClassName" style="padding: 2% 0;">
		    <el-table-column prop="username" label="姓名"></el-table-column>
		    <el-table-column prop="student_id" label="学号"></el-table-column>
		    <el-table-column prop="class_name" label="班级"></el-table-column>
		    <el-table-column prop="points" label="积分" sortable>
		      <template #default="{ row }">
		        <span v-if="row.points !== null">{{ row.points }}</span>
		        <span v-else>0</span>
		      </template>
		    </el-table-column>
		    <el-table-column label="排名" width="80px">
		      <template #default="{ $index }">
		        {{ $index + 1 }}
		      </template>
		    </el-table-column>
		  </el-table>
		</div>
		</el-main>
</el-container>
	
	
 
</template>

<script lang="ts" setup>
import { defineComponent, ref ,reactive,onMounted} from 'vue';
import axios from 'axios';

const students = ref([]);
const datas = reactive({
	data:[],
	classlist:[],
	classid:localStorage.getItem('classid'),
	classname:localStorage.getItem('class_name'),
	level:localStorage.getItem('auth_level')
})
   const gettop =()=>{
	   axios.get('/login/v1/point/classpoints?classid='+datas.classid,{
	   	 	 headers: {
	   	 		'TOKEN': localStorage['token']
	   	 	  },
	   	 }).then(response => {
			 const lists= response.data.data
			 for(let i in response.data.data){
				 if(response.data.data[i].username=="admin"){
					lists.splice(i,1)
				 }
			 }
	     students.value = lists.sort((a, b) => b.points - a.points);
	   });
   }
	const getclasslist = async () => {
		try {
		  const response = await axios.get('/login/v1/authentication/class',{
				  headers: {
					'TOKEN': localStorage['token']
				  },
				  })
		  const data = response.data
		  if (data.code == 0) {
				datas.classlist = data.data.class
				if(datas.level=='100'){
					datas.classid = data.data.class[0].id
					gettop()
				}else{
					gettop()
				}
				
		  } 
		}catch(error){
		  console.log(error)
		}
	}
    const rowClassName =({ row, rowIndex }) =>{
      if (rowIndex === 0) {
        return 'top-student';
      } else if (rowIndex === 1) {
        return 'second-student';
      } else if (rowIndex === 2) {
        return 'third-student';
      }
    }
onMounted(()=>{
	getclasslist()
})
</script>

<style scoped>
.top-student {
  background-color: #f5f5f5;
}

.second-student {
  background-color: #fafafa;
}

.third-student {
  background-color: #f5f5f5;
}
</style>
